<template>
  <el-container class="big-light" style="min-height:100vh">
      <el-header class="bg-info" style="height:4rem">
        <el-row>
          <el-col :span="4" class="text-center">
            <img src="@/assets/logo.png" style="height: 4rem" />
          </el-col>
          <el-col :span="20">
            <el-menu 
              mode="horizontal"
              class="h-100 bg-info"
              :router="true"
            >
            <el-menu-item index="/" class="ms-auto">回到首页</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="bg-white w-75 mx-auto shadow-lg">
        <!--笔记标题-->
        <div>
          <span class="fs-1">{{ note.noteName }}</span>
        </div>
        <!--笔记内容-->
        <div>
          <div id="editor-container"></div>
        </div>
        <!--标签区域-->
        <div class="py-3">
          <NoteDetailTag :selectTags="note.tags" />
        </div>
        <!--作者信息-->
        <div class="px-3 py-3">
          <el-row>
            <el-col :span="2">
              <el-avatar shape="square" :size="70" :src="note.headUrl" />
            </el-col>
            <el-col :span="8">
              <div>
                {{ note.authorName }}
              </div>
              <div>TA的收藏</div>
              <div>TA的点赞</div>
            </el-col>
          </el-row>
        </div>
        <!--功能区-->
        <div class="px-3 py-3">
          <el-row>
            <el-col :span="10">
              <el-button type="danger" plain @click="likeAction(noteId)">点赞</el-button>
              <el-button type="success" plain>分享到微信</el-button>
              <el-button type="primary" plain>分享到QQ</el-button>
            </el-col>
            <el-col :span="14" class="text-end">
              点赞({{ note.likeNum }}) 阅读 ({{ note.viewNum }}) 评论 ({{ note.commentNum }})
            </el-col>
          </el-row>
        </div>
        <!--评论区-->
        <div class="px-3 py-3">
          <NoteComment :noteInfoId="noteId" />
        </div>
      </el-main>
  </el-container>
</template>

<script>
import Editor from "@/tools/editor.js";
import NoteDetailTag from "./NoteDetailTag.vue";
import NoteComment from "./NoteComment.vue";

export default {
  name:"NoteDetail",
  components:{
    NoteDetailTag,
     NoteComment,
  },
  data(){
    return{
      //存放WangEditor的实例
      editor:null,
      //从首页读取的noteId
      noteId:this.$route.params.noteId,
      //后端笔记详情接口返回的详情数据格式
      note:{
        authorId:null,
        authorName:null,
        noteName:null,
        noteContent: [],
        publishTime:null,
        headUrl:null,
        likeNum:0,
        commentNum:0,
        viewNum:0,
        tags: [
          {
            tagId:null,
            tagName:null,
          },
        ],
      },
    };
  },
  async mounted() {
     //获取详情数据
    await this.getDetail();
    //初始化富文本
    this.initEditor();
  },
  methods: {
    //读取详情页数据
    async getDetail(){
      await this.$axios("/api/note/detail?noteId=" + this.noteId).then(
        (response) => {
          let data = response.data;
          if (data.code == 200) {
            this.note = data.data;
          }else{
            alert(data.msg);
          }
        }
      );
    },
    initEditor() {
      this.editor = new Editor();
      //初始化富文本的内容
      this.editor.initContent(this.note.noteContent,true);
    }, 

    likeAction(noteId) {
      this.$axios.get('api/home/like?noteId='+noteId)
      .then(response=>{
        let data =response.data;
        alert(data.msg);
        if(data.code==200){
          this.noteli.likeNum += 1;   //"+= 逐渐递加"
        }
      })
    }
  },

};
</script>

<style>

</style>